<script setup lang='ts'>
import { ref, watch ,reactive } from 'vue';

       const count = ref(0)
       const name = ref("123")

       type IPerson = { name: string, info: { address: string, phone: string  } }

const person = reactive<IPerson>({
   name: "张三",
   info: {
       address: "北京昌平",
       phone: "010-12345678"
   }
})
// 使用 watch 监听一个响应式数据
       watch(count, (newValue, oldValue) => {
           console.log(newValue, oldValue)
       })
    //    使用 watch 监听多个响应式数据
      watch([count, () => count.value], (newValue, oldValue) => {
           console.log(newValue, oldValue)
       })
    //    Watch监听响应式对象中属性的变化
    watch(() => person.name, (newValue, oldValue) => {
           console.log(newValue, oldValue)
       },{
         deep: true, //开启深度监听
         immediate: true // 初始化执行一次
       })
</script>
       
<template>
       <h1>watch最简单的写法</h1>
       <button @click="count--">-</button>
       <span>{{ count }}</span>
       <button @click="count++">+</button>
       <input type="text" v-model="name">
       <h1>Watch监听响应式对象中属性的变化</h1>
       <ul>
        <li v-for="(value, key,index) in person" :key="index">
            {{ value }}
        </li>
       </ul>
       <button @click="person.name = '李四'">修改名字</button>
       <button @click="person.info = {address: '123', phone: 'scd'  }">修改信息</button> 
</template>
       
<style scoped>
       
</style>